<script setup lang="ts">
import { useApp } from "./hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddForm from "./addForm.vue";
import EditPen from "@iconify-icons/ep/edit-pen";

const clickAddBut = row => {
  dialogFormAddRef.value.showdialogForAdd(row);
};

const { dialogFormAddRef, dataList, loading, columns, onSearch } = useApp();
</script>

<template>
  <div>
    <div class="main">
      <AddForm ref="dialogFormAddRef" @onSearchEnv="onSearch" />
      <PureTableBar title="应用管理" @refresh="onSearch">
        <template v-slot="{ size, checkList }">
          <pure-table
            border
            align-whole="center"
            table-layout="auto"
            :loading="loading"
            :size="size"
            :data="dataList"
            :columns="columns"
            :checkList="checkList"
            :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
          >
            <template #operation="{ row }">
              <el-button
                @click="clickAddBut(row)"
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(EditPen)"
              >
                发布
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>
</template>

<style scoped></style>
